<template>
<!--integralMall.wxml-->
<view class="container">
    <view class="nav">
        <navigator :class="'nav-item ' + (rankType == '' ? 'red-on' : '')" @tap="changeTab" id="rank_default">默认</navigator>
        <navigator :class="'nav-item ' + (rankType == 'num' ? 'red-on' : '')" @tap="changeTab" id="rank_num">兑换量<view class="ico-dg"><image class="wh100" src="/static/images/dg.png"></image></view></navigator>
        <navigator :class="'nav-item ' + (rankType == 'integral' ? 'red-on' : '')" @tap="changeTab" id="rank_integral">积分值<view class="ico-dg"><image class="wh100" src="/static/images/dg.png"></image></view></navigator>
    </view>
    <view class="choice_list">
        <block v-for="(item, index) in requestData.goods_list" :key="index">
            <navigator class="choice_item" :url="'/pages/goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id">
                <view class="img-wrap">
                    <!-- <view class='h-label' style='background: url(/images/h-label.png) no-repeat;background-size:90rpx 25rpx;'>买二送一</view> -->
                    <image :src="url + '/api/goods/goodsThumImages?goods_id=' + item.goods_id + '&width=400&height=400'"></image>
                </view>
                <view class="item-cont">
                    <view class="title">{{item.goods_name}}</view>
                    <view class="price">
                    <view class="discount-price">
                        <view class="big">￥{{item.calPoint}}</view> + {{item.exchange_integral}}</view>积分
                    </view>
                    <view class="market-price">市场价  ￥  {{item.market_price}}</view>
                </view>
                <button class="exchange-btn">立即兑换</button>
            </navigator>
        </block>
    </view>
    <view class="no-data" v-if="!requestData.goods_list || requestData.goods_list.length == 0">
        <image src="/static/images/cart-null.png" class="cart-image"></image>
        <view class="no-data-title">没有找到相关的记录</view>
        <navigator url="/pages/index/index/index" class="lookat"> 去逛逛 </navigator>
    </view>
</view>
</template>

<script>
var app = getApp();
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      requestData: null,
      rankType: '',
      goodsCurrentPage: 1
    };
  },

  components: {},
  props: {},
  onLoad: function () {
    load.init(this, 'goods_list', 'requestData');
    this.requestIntegralMall(this.rankType);
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      this.requestIntegralMall(this.rankType);
    }
  },
  methods: {
    changeTab: function (event) {
      var rank = '';

      if (event.target.id == 'rank_num') {
        rank = 'num';
      } else if (event.target.id == 'rank_integral') {
        rank = 'integral';
      }

      load.resetConfig();
      this.rankType = rank;
      this.setData({
        rankType: rank
      });
      this.requestData = null;
      this.goodsCurrentPage = 1;
      this.requestIntegralMall(rank);
    },
    requestIntegralMall: function (rank) {
      var that = this;
      var requestUrl = '/api/goods/integralMall';

      if (rank) {
        requestUrl += '/rank/' + rank;
      }

      requestUrl = requestUrl + '?p=' + that.goodsCurrentPage;
      load.request(requestUrl, function (res) {
        res.data.result.goods_list.forEach(function (val) {
          val.calPoint = (val.shop_price - val.exchange_integral / res.data.result.point_rate).toFixed(2);
        });
        that.goodsCurrentPage++;
      });
    }
  }
};
</script>
<style>
/* integralMall.wxss */
.container {
    color: #666;
    background: #f5f5f5;
}
.nav-item{
    float: left;
    width: 33.33%;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    background-color: #fff;
}
.nav-item .ico-dg{
    width: 26rpx;
    height: 14rpx;
    margin-left: 10rpx;
    line-height: 0;
}
.choice_list{
    background: #f5f5f5;
}
.choice_item{
    background: #fff;
    position: relative;
    min-height: 200rpx;
    padding: 20rpx 0;
    font-size: 28rpx;
    width: 710rpx;
    box-sizing: border-box;
    margin: 0 auto;
    margin-top: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
}
.img-wrap{
    float: left;
    width: 180rpx;
    height: 180rpx;
    padding:0 15rpx 10rpx 10rpx;
}
.img-wrap image{
    width: 100%;
    height: 100%;
}
.item-cont .title{
    height: 72rpx;
    margin: 16rpx 0;
    padding-right: 10rpx;
    line-height: 36rpx;
    color: #333;
    overflow: hidden;   
}
.discount-price{
    display: inline-block;
}
.big{
    display: inline-block;
    color: #ff6a00;
    font-weight: bold;
}
.exchange-btn{
    position: absolute;
    right: 20rpx;
    bottom:20rpx;
    width: 150rpx;
    height: 56rpx;
    line-height: 56rpx;
    text-align: center;
    color: #666;
    border-radius: 10rpx;
}
.price{
    padding-bottom: 20rpx;
}
.h-label{
  position: absolute;
  font-size: 16rpx;
  color: #ffffff;
  width: 90rpx;
  height: 25rpx;
  line-height: 25rpx;
  padding-left: 8rpx;
}
.little-btn-2{
  position: absolute;
  right: 20rpx;
  bottom:20rpx;
}
</style>